<template>
  <div id="main">
    <!-- 用户管理列表 -->
    <el-col style="float:left" class="box-crad-2">
      <el-card>
        <my-form
          ref="form"
          :form="userForm"
          :userTopList="userTopList"
          :labelWidth="userWidth"
        >
          <!-- <el-row :gutter="5">
            <el-col :span="7">
              <el-form-item label="登录账号：">
                <el-input
                  placeholder="登录账号"
                  v-model="userForm.code"
                  style="width:100%"
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="用户姓名：">
                <el-input
                  placeholder="用户姓名"
                  v-model="userForm.name"
                  style="width:100%"
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <el-button icon="el-icon-delete" size="small">清空</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-button
              :plain="item.boolean"
              @click="switchBtn(item)"
              v-for="(item, index) in btnList"
              :key="index"
              :size="item.size"
              :type="item.type"
              :icon="item.icon"
              >{{ item.name }}</el-button
            >
          </el-row>
          <el-row>
            <el-table :data="userData" border style="width: 100%">
              <el-table-column type="selection"> </el-table-column>
              <el-table-column type="index" label="#"> </el-table-column>
              <el-table-column prop="usercode" label="用户账号" width="120px">
              </el-table-column>
              <el-table-column prop="username" label="用户姓名" width="120px">
              </el-table-column>
              <el-table-column prop="email" label="电子邮箱" width="120px">
              </el-table-column>
              <el-table-column
                prop="affiliation"
                label="所属项目"
                width="150px"
              >
                <template slot-scope="scope">
                  <el-tag>{{ scope.row.affiliation }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="classlist" label="班级列表" width="120px">
              </el-table-column>
              <el-table-column prop="role" label="角色" width="120px">
              </el-table-column>
              <el-table-column prop="userstate" label="用户状态" width="120px">
                <template slot-scope="scope">
                  <el-switch disabled :value="userData[scope.row.id].value">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="lookUserInfo(scope.row)"
                    type="text"
                    size="small"
                    icon="el-icon-view"
                    >查看</el-button
                  >
                  <el-button type="text" size="small" icon="el-icon-edit"
                    >编辑</el-button
                  >
                  <el-button type="text" size="small" icon="el-icon-delete"
                    >注销</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row> -->
        </my-form>
        <my-table
          :tableData="userData"
          :tableHeader="tableHeader"
          :isShow="true"
        ></my-table>
        <el-pagination
          :hide-on-single-page="false"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </el-card>
    </el-col>
    <!-- 添加用户的对话框 -->
    <my-dialog
      v-model="addDialogVisible"
      :title="title"
      :fullscreen="isfullscreen"
      :topIcon="icon"
      @close="close"
      @handleIcon="isfullscreen = !isfullscreen"
    >
      <my-collapse
        :collapseItem="collapseItem"
        :form="addForm"
        :labelWidth="labelWidth"
        :rules="userRules"
      >
        <slot name="title"></slot>

        <template v-slot:transfer>
          <el-transfer
            filterable
            filter-placeholder="请输入班级名称"
            v-model="value"
            :data="data"
            :titles="titles"
          >
          </el-transfer>
        </template>
      </my-collapse>
    </my-dialog>
  </div>
</template>

<script>
import dialog from "../../../components/elcomponents/dialog";
import collapse from "../../../components/elcomponents/collapse";
import myForm from "../../../components/elcomponents/form";
import myTable from "../../../components/elcomponents/table";
export default {
  components: {
    "my-dialog": dialog,
    "my-collapse": collapse,
    "my-form": myForm,
    "my-table": myTable,
  },
  data() {
    const getclazzData = () => {
      const data = [];
      const cities = [
        "计算机高职1班",
        "计算机高职2班",
        "计算机4班",
        "计算机5班",
        "计算机7班",
        "计算机8班",
        "计算机9班",
        "计算机10班",
        "计算机11班",
        "计算机12班",
        "计算机14班",
        "计算机15班",
        "1804",
        "1805",
        "学前9班",
        "学前10班",
        "学前11班",
        "1904",
        "1903",
        "2004",
        "2005",
        "电商高职1班",
        "电商中职1班",
        "电商中职2-1班",
        "电商中职2-2班",
        "计算机中职13班",
        "20级电商1班",
        "20级电商2班",
        "19级电商1班",
        "19级电商2班",
        "18级电商1班",
        "18级电商2班",
        "18级电商2班",
        "18级电商1-2班",
        "计算机1班",
        "计算机2班",
      ];
      const pinyin = [
        "计算机高职1班",
        "计算机高职2班",
        "计算机4班",
        "计算机5班",
        "计算机7班",
        "计算机8班",
        "计算机9班",
        "计算机10班",
        "计算机11班",
        "计算机12班",
        "计算机14班",
        "计算机15班",
        "1804",
        "1805",
        "学前9班",
        "学前10班",
        "学前11班",
        "1904",
        "1903",
        "2004",
        "2005",
        "电商高职1班",
        "电商中职1班",
        "电商中职2-1班",
        "电商中职2-2班",
        "计算机中职13班",
        "20级电商1班",
        "20级电商2班",
        "19级电商1班",
        "19级电商2班",
        "18级电商1班",
        "18级电商2班",
        "18级电商2班",
        "18级电商1-2班",
        "计算机1班",
        "计算机2班",
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index],
        });
      });
      return data;
    };
    return {
      title: "新增",
      addDialogVisible: false,
      isfullscreen: false,
      icon: "el-icon-full-screen dialog2",
      addForm: {},
      labelWidth: "100px",
      userRules: [],
      collapseItem: [
        {
          name: "user1",
          icon: "el-icon-user-solid dialog1",
          title: "基础信息",
          formList: [
            {
              type: "Input",
              label: "用户账号",
              placeholder: "请输入账号",
              prop: "usercode",
              span: "",
            },
            {
              type: "Input",
              label: "用户姓名",
              placeholder: "请输入姓名",
              prop: "username",
              span: "10",
            },
            {
              type: "Select",
              label: "性别",
              placeholder: "请选择性别",
              prop: "gender",
              isShow: false,
              options: [
                {
                  value: "0",
                  label: "男",
                },
                {
                  value: "1",
                  label: "女",
                },
                {
                  value: "2",
                  label: "未知",
                },
              ],
              span: "14",
            },
          ],
        },
        {
          name: "user2",
          icon: "el-icon-s-order dialog1",
          title: "详细信息",
          formList: [
            {
              type: "Input",
              label: "手机号码",
              placeholder: "请输入手机号码",
              prop: "phone",
              span: "",
            },
            {
              type: "Input",
              label: "电子邮箱",
              placeholder: "请输入电子邮箱",
              prop: "email",
              span: "",
            },
          ],
        },
        {
          name: "user3",
          icon: "el-icon-s-custom dialog1",
          title: "职责信息",
          formList: [
            {
              type: "Select",
              label: "所属项目",
              placeholder: "请选择 所属项目",
              prop: "project",
              isShow: true,
              options: [
                {
                  value: "qinglong",
                  label: "青龙职教中心",
                },
                {
                  value: "shanhaiguan",
                  label: "山海关铁路技师学院",
                },
                {
                  value: "anjiao",
                  label: "安新职教中心",
                },
              ],
            },
            {
              type: "Select",
              label: "角色名称",
              placeholder: "请选择 角色名称",
              prop: "role",
              isShow: true,
              options: [
                {
                  value: "sadmin",
                  label: "超级管理员",
                },
                {
                  value: "admin",
                  label: "管理员",
                },
                {
                  value: "teacher",
                  label: "教师",
                },
                {
                  value: "cteacher",
                  label: "班主任",
                },
                {
                  value: "drillmaster",
                  label: "教官",
                },
              ],
            },
            {
              type: "Select",
              label: "用户状态",
              placeholder: "请选择 用户状态",
              prop: "status",
              isShow: false,
              options: [
                {
                  value: "valid",
                  label: "有效",
                },
                {
                  value: "invalid",
                  label: "无效",
                },
              ],
            },
            {
              type: "transfer",
              label: "班级列表",
              slotName: "transfer",
            },
          ],
        },
      ],
      userForm: {},
      userWidth: "auto",
      userTopList: [
        [
          {
            type: "Input",
            span: "7",
            label: "登录账号",
            placeholder: "登录账号",
          },
          {
            type: "Input",
            span: "7",
            label: "用户姓名",
            placeholder: "用户姓名",
          },
          {
            type: "Button",
            span: "2",
            icon: "el-icon-search",
            colorType: "primary",
            isShow: false,
            title: "搜索",
          },
          {
            type: "Button",
            span: "2",
            icon: "el-icon-delete",
            colorType: "danger",
            isShow: true,
            title: "清空",
          },
        ],
        [
          {
            type: "Button",
            icon: "el-icon-plus",
            colorType: "primary",
            isShow: false,
            title: "新增",
          },
          {
            type: "Button",
            icon: "el-icon-delete",
            colorType: "danger",
            isShow: true,
            title: "删除",
          },
          {
            type: "Button",
            icon: "el-icon-user",
            colorType: "info",
            isShow: true,
            title: "角色配置",
          },
          {
            type: "Button",
            icon: "el-icon-refresh",
            colorType: "info",
            isShow: true,
            title: "密码重置",
          },
          {
            type: "Button",
            icon: "el-icon-refresh",
            colorType: "info",
            isShow: true,
            title: "密码重置",
          },
          {
            type: "Button",
            icon: "el-icon-upload2",
            colorType: "success",
            isShow: true,
            title: "导入",
          },
          {
            type: "Button",
            icon: "el-icon-download",
            colorType: "warning",
            isShow: true,
            title: "导出",
          },
        ],
        [],
      ],
      tableHeader: [
        { prop: "usercode", label: "用户账号", width: "120px" },
        { prop: "username", label: "用户姓名", width: "120px" },
        { prop: "email", label: "电子邮箱", width: "120px" },
        { prop: "affiliation", label: "所属项目", width: "120px" },
        { prop: "classlist", label: "班级列表", width: "120px" },
        { prop: "role", label: "角色", width: "120px" },
        {
          prop: "userstate",
          label: "用户状态",
          width: "120px",
          formData: (val) =>{
            return val ? true : false
          }
        },
        {
          prop: "oper",
          label: "操作",
          oper: [
            { name: "修改", type: "primary" },
            { name: "删除", type: "danger" },
          ],
        },
      ],
      userData: [
        {
          id: 0,
          usercode: "admin",
          username: "陈晓强",
          email: "123@qq.com",
          affiliation: "山海关铁路技师学院",
          classlist: ["1804", "1805"],
          role: "超级管理员",
          value:true
        },
        {
          id: 1,
          usercode: "admin",
          username: "石博文",
          email: "5676@qq.com",
          affiliation: "青龙职教中心",
          classlist: ["1804", "1805"],
          role: "超级管理员",
          value:false

        },
      ],
      loading: false,
      isshow: true,
      tabheight: "100%",
      data: getclazzData(),
      titles: ["班级", "班级"],
      value: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    switchBtn(list) {
      switch (list.id) {
        case 0:
          this.openUserBox();
          break;
      }
    },
    openUserBox() {
      this.addDialogVisible = true;
    },
    close() {
      this.addDialogVisible = false;
    },
    lookUserInfo() {},
    addUserInfo() {
      this.addDialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  display: flex;
  .box-crad-1 {
    width: 200px;
  }
  .box-crad-2 {
    flex: 1;
    position: relative;
  }
  .el-table {
    margin-top: 10px;
    font-size: 13px;
  }
  .el-table/deep/ thead th.is-leaf {
    text-align: center !important;
    color: #000;
  }
  .el-table/deep/ .cell {
    text-align: center !important;
  }

  .el-dialog__header {
    position: relative;
  }
  .el-pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
